export const Text = `
import { useCallback, useEffect, useMemo, useState, useRef, memo } from 'react'
// 父组件
function ReactHooks(props) {
  // 现在有个情况就是我只修改了父组件的参数  但是子组件全部更新了  这样是很费性能的这样我可以用useCallback或者 useMemo
  // 1、useMemo: useMemo和useEffect有点类似 也是说指定那些参数改变后才会执行里面的方法 有点类似vue的计算属性
  // 2、useEffect 里面的参数有两个一个是callabck回调一个是一个数组 数组里面放入我们需要监听的数据 如果是空数组则只会执行一次
  // 3、useRef需要配合forwardRef一起使用 也可以直接定义 因为使用useState可能不会实时  可以获取htmldom和子组件的参数 
  // 4、useCallback：我现在只想如果只是父组件的参数发生了改变不想去重新渲染子组件 配合memo使用只有点击修改指定在第二个数组里面的才会去调用
  // 总结：useCallback与useMemo的区别在于useMemo不需要配合memo来使用 useMemo类似于监听并且会有返回值 useCallback是配合memo来一起使用 memo主要是只有当前组件值发生变化才会渲染提高性能 返回出去的方法用useCallback包起来后第二个参数数组，里面的数据方法变化才会去调用
  const [a, setA] = useState(1)
  // const [b, setB] = useState(1)
  // const b = useRef(1)
  // const aUseMome = useMemo(() => {
  //   return a + b
  // }, [a,b])
  useEffect(() => {
    console.log('useEffect');

  }, [])
  const handleClick = useCallback(() => {
    console.log(55);
    setA(a + 1)
  }, [a]);

  return (
    <div>
      {/* <button onClick={() => { setA(a + 1) }}>a++</button>
      <button onClick={() => { setB(b + 1) }}>b++</button>
      <div>{aUseMome}</div>
      <div>{b}</div> */}
      {/* <button onClick={() => {b.current  = b.current+1 }}>b++</button>
      <button onClick={()=>{setTimeout(()=>{
        // 这时b还是停留在 3秒前的值  不是最新的 因为react每次都会重新渲染组件，每次的渲染都会拿到独立的b值
        alert(b.current)
      },3000)}}>打印b</button>
      <div>{b.current}</div> */}
      <button onClick={() => { setA(a + 1) }}>a++</button>
      <div>{a}</div>
      <ReactHooks1></ReactHooks1>
      <ReactHooks2></ReactHooks2>
      <ReactHooks3 a={a} fun={handleClick}></ReactHooks3>
    </div>
  )
}
// 子组件1
function ReactHooks1(props) {
  console.log('子组件1改动了');
  
  return (
    <div>子组件1</div>
  )
}
// 子组件2
function ReactHooks2(props) {
  console.log('子组件2改动了');
  return (
    <div>子组件2</div>
  )
}
const ReactHooks3 = memo((props:any) => {
  console.log('子组件3改动了');
  function asa(){
    props.fun()
  }

  return <div>
    <button onClick={asa}>按钮</button>
    <div>
    {props.a}
    </div>
  </div>
})
export default ReactHooks`